import React from 'react';
import { TT, VCC } from '@/components';
import { DeviceEventEmitter } from 'react-native';
// import LottieView from 'lottie-react-native';
import { R } from '@/assets';

/**
 * 全局的Loading，使用更方便,性能更好, 请不要在普通页面直接使用此组件，请使用Loaing.show()调起
 */
export function GlobalLoading() {
  const timer = React.useRef<number | null>(null);
  const [show, setShow] = React.useState<boolean>(false);
  const [text, setText] = React.useState<string>('');
  React.useEffect(() => {
    const sub = DeviceEventEmitter.addListener(
      ShowGlobalLoadingCmd,
      (newText: string) => {
        if (!timer.current) {
          setText(newText);
          setShow(true);
        }
      }
    );
    const hideSub = DeviceEventEmitter.addListener(HideGlobalLoadingCmd, () => {
      setShow(false);
    });
    return () => {
      sub.remove();
      hideSub.remove();
    };
  }, []);
  if (!show) {
    return null;
  }
  return (
    <VCC pos={0} bg="#000000B3">
      {/* <LottieView
        source={R.publics.loginLoading()}
        // eslint-disable-next-line react-native/no-inline-styles
        style={[{ width: 35, height: 35 }]}
        autoPlay
        loop={true}
      />
      <TT c="#fff" fs="20" fw="400" mt="16" nol="2" ml="32" mr="32">
        {text}
      </TT> */}
    </VCC>
  );
}

export const ShowGlobalLoadingCmd = 'global-Loading-show';
export const HideGlobalLoadingCmd = 'global-Loading-Hide';
